<template>
<div id="latest_block">
	<div class="top">
	 	<div class="container">
	 		<div class="top">
		 		<p>{{ $lang("LATEST_BLOCKS") }}</p>
		 		<el-input 
		 			v-model="searchInput" 
		 			:placeholder="$lang('SEARCH_TIP')"
		 		>
		 			<el-button slot="append" type="danger" @click="searchBlock"><img src="../../assets/img/search.png" alt="$lang('LATEST_BLOCKS')"><span>{{ $lang("SEARCH") }}</span></el-button>
		 		</el-input>
		 		<div class="canvas">
		 			<img class="bg" src="../../assets/img/banlance.png" alt=""/>
		 			<div class="external">
			 			<!--上下左右4个 外部-->
			 			<div class="left_top">
			 				<p>{{CensesData.blockheight}}</p>
			 				<img src="../../assets/img/beat_icon.png" alt="beat" />
			 			</div>
			 			<div class="left_bottom">
			 				<p>{{CensesData.countTrans}}</p>
			 				<img src="../../assets/img/beat_icon.png" alt="beat" />
			 			</div>
			 			<div class="right_top">
			 				<p>{{CensesData.blocktime}}</p>
			 				<img src="../../assets/img/beat_icon.png" alt="beat" />
			 			</div>
			 			<div class="right_bottom">
			 				<p>{{CensesData.avgTrans}}</p>
			 				<img src="../../assets/img/beat_icon.png" alt="beat" />
			 			</div>	
		 			</div>
		 			<!--内部5个 -->
		 			<div class="inside">
		 				<img src="../../assets/img/beat3.png" alt="icon1" />
		 				<img src="../../assets/img/beat5.png" alt="icon5" />
		 				<img src="../../assets/img/beat2.png" alt="icon2" />
		 				<img src="../../assets/img/beat4.png" alt="icon4" />
		 				<img src="../../assets/img/beat1.png" alt="icon1" />
		 			</div>
		 		</div>
	 		</div>
	 </div>
	</div>
	<div class="bottom">
	 	<div class="container clearfix">
	 		<div class="f_l">
	 			<router-link to="blocks" tag="div" class="tap_blocks">{{ $lang("BLOCK_TAB") }}<i></i></router-link>
	 			<el-table
			    :data="blockList.list"
                :empty-text="$lang('NODATA')"
                v-loading="loading2"
                element-loading-spinner="el-icon-loading"
                element-loading-background="rgba(0, 0, 0, 0.3)"
			    style="width: 100%;border:10px;background-color: #212C4F;"
                height="500"
			  	:row-style="{
			  		'border':'none',
			  		'background-color':'#1D2748',
			  		'border-bottom':'none',
			  	}"	
			  	>
			    <el-table-column
			      prop="blockheader.hash"
			      :label="$lang('CURRENT_HASH')"
			      width="200">
                  <template slot-scope='scope' ><span class="callspan" @click="searchBlockHash(scope.row.blockheader.hash)">{{ scope.row.blockheader.hash }}</span></template>
			    </el-table-column>
			    <el-table-column
			      prop="blocksize"
			      :label="$lang('BLOCK_SIZE')"
			      >
			    </el-table-column>
			    <el-table-column
			      prop="blockheader.timestamp"
			      :label="$lang('DATE')">
                  <template slot-scope='scope' >{{ $filterTime(scope.row.blockheader.timestamp) }}</template>
			    </el-table-column>
			    <el-table-column
			      prop="blockheight"
			      :label="$lang('HEIGHT')">
                  <template slot-scope='scope' ><span class="callspan" @click="searchHeight(scope.row.blockheight)">{{ scope.row.blockheight }}</span></template>
			    </el-table-column>
			  </el-table>
	 		</div>
	 		<div class="f_r">
	 			<router-link to="transaction" tag="div" class="tap_blocks">{{ $lang("TRANSACTION") }}<i></i></router-link>
	 			<el-table
                    :data="transactionList.list"
                    style="width: 100%;border:10px;background-color: #212C4F;"
                    :empty-text="$lang('NODATA')"
                    v-loading="loading"
                    element-loading-spinner="el-icon-loading"
                    element-loading-background="rgba(0, 0, 0, 0.3)"
                    height="500"
                    :row-style="{
                        'border':'none',
                        'background-color':'#1D2748',
                        'border-bottom':'none',
                    }"
			  	>
			    <el-table-column
			      prop="hash"
			      :label="$lang('CURRENT_HASH')"
			      width="200">
                  <template slot-scope='scope' ><span class="callspan" @click="searchHash(scope.row.hash)">{{ scope.row.hash }}</span></template>
			    </el-table-column>
			    <el-table-column
			      prop="payaddress"
			      :label="$lang('SENDER')"
                >
			      <template scope='scope' ><router-link class="callspan" :to="{path:'/account/sender/' + scope.row.payaddress }">{{ scope.row.payaddress }}</router-link></template>
			    </el-table-column>
			    <el-table-column
			      prop="receiptaddress"
			      :label="$lang('RECEIVER')">
			      <template scope='scope' ><router-link class="callspan" :to="{path:'/account/receiver/' + scope.row.receiptaddress }">{{ scope.row.receiptaddress }}</router-link></template>
			    </el-table-column>
			    <el-table-column
			      prop="blockheight"
			      :label="$lang('HEIGHT')">
                  <template slot-scope='scope' ><span class="callspan" @click="searchHeight(scope.row.blockheight)">{{ scope.row.blockheight }}</span></template>
			    </el-table-column>
			  </el-table>
	 		</div>
	 	</div>
	</div>
</div>
</template>

<script>
import axios from 'axios';
import { gets } from '@/api/api.js';
import url from '@/api/url.js';
export default {
	data() {
		return {
			searchInput :"",
			blockList: [],
            transactionList:[],
            timeOut: null,
            CensesData: [],
            loading: true,
            loading2: true
		}
    },
	methods:{
		// async getInfo(){
		// 	try {
		// 		//获取简易交易流水信息
		// 		const resTransaction = await gets.pageList('/transaction/pageList', {
		// 			pageNum:1,
		// 			pageSize:4
		// 		});
		// 		this.transactionList = resTransaction.list;
		// 		//获取区块交易信息
		// 		const resBlock = await gets.pageList('/block/pageList', {
		// 			pageNum:1,
		// 			pageSize:4
		// 		});
		// 		this.blockList = resBlock.list;
		// 	} catch (e) {
		// 		throw e;
		// 	}
        // },
        getBlock(){
            let that = this
            that.loading2 = true
            axios.get(url.urlblockH + '/block/pageList', {
                params: {
                    pageNum: 1,
                    pageSize: 10
                }
            })
            .then(function (res) {
                that.blockList = res.data.data
                that.loading2 = false
            })
            .catch(function (error) {
                console.log(error);
            })
        },
        getBlockT() {
            let that = this
            that.loading = true
            axios.get( url.urlblockH + '/transaction/pageList', {
                params: {
                    pageNum: 1,
                    pageSize: 10
                }
            })
            .then(function (res) {
                that.transactionList = res.data.data
                that.loading = false
            })
            .catch(function (error) {
                console.log(error);
            })
        },
        getCensesData(){
            let that = this
            const loading = this.$loading({
                text: that.$lang('loading'),
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            });
            axios.get(url.urlblockH + '/block/getCensesData')
            .then(function (res) {
                that.CensesData = res.data.data
                loading.close()
            })
            .catch(function (error) {
                loading.close()
                console.log(error);
            })
        },
        searchBlock(){
            let that = this
            if (that.searchInput == ''){
                that.$message({
                    message: that.$lang('SEARCH_TIP'),
                    type: 'warning'
                });
            } else{
                let reg = /^[0-9]*$/
                if (reg.test(that.searchInput)) {
                    that.$router.push({path:'/blocks/',query: {searchInput: that.searchInput}})
                } else {
                    that.$router.push({path:'/transaction/',query: {searchInput: that.searchInput}})
                }
            }
        },
        searchHash (hash) {
            let that = this
            that.$router.push({path:'/TransactionDetailed/' + hash})
        },
        searchHeight(height) {
            let that = this
            that.$router.push({path:'/blocks/',query: {blockHeight: height}})
        },
        searchBlockHash (hash) {
            let that = this
            that.$router.push({path:'/blocksDetailed/' + hash})
        }
    },
	mounted(){
        let that = this
        that.getBlock();
        that.getBlockT();
        that.getCensesData()
        that.timeOut = setInterval(function(){
            that.getBlock()
            that.getBlockT()
        }, 5000)
    },
    destroyed () {
        clearInterval(this.timeOut)
    },
}
</script>

<style scoped lang="scss">
@import '~assets/scss/latest_block.scss';
.callspan{
    cursor: pointer;
    color: rgb(204, 163, 60) !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
</style>